<template>
  <div class="user-layout-login">
    <a-flex gap="middle" vertical  align="center">
      <router-link to="/" style="margin: 60px">
        <a-image :preview="false" :src="logo" width="200px"></a-image>
      </router-link>
      <a-menu v-model:selectedKeys="loginModel" mode="horizontal">
        <a-menu-item key="1">
          <span>账号密码登录</span>
        </a-menu-item>
        <a-menu-item key="2">
          <span>验证码登录</span>
        </a-menu-item>
      </a-menu>
      <div style="margin: 15px" v-if="loginModel[0] === '1'">
        <!--账号密码登录框-->
        <a-space style="min-width: 300px" direction="vertical" :size="30">
          <a-space direction="horizontal" :size="8">
<!--            <span>账号：</span>-->
            <a-input style="width: 300px" size="large" v-model:value="loginWithPwdParam.username" placeholder="请输入邮箱、电话">
              <template #prefix>
                <user-outlined class="site-form-item-icon" />
              </template>
            </a-input>
          </a-space>
          <a-space direction="horizontal" :size="8">
<!--            <span>密码：</span>-->
            <a-input-password style="width: 300px" size="large" v-model:value="loginWithPwdParam.pwd" placeholder="请输入密码">
              <template #prefix>
                <lock-outlined class="site-form-item-icon" />
              </template>
            </a-input-password>
          </a-space>
          <a-space direction="vertical" :size="8">
            <a-button type="link">忘记密码</a-button>
          </a-space>

          <a-button :disabled="loginWithPwdParam.username ==='' || loginWithPwdParam.pwd === ''"
                    :loading="loading"
                    @click="handleLogin" style="width: 300px" type="primary" size="large">
            登录
          </a-button>
        </a-space>
      </div>
      <div v-if="loginModel[0] === '2'">
        <!--验证码登录框-->
      </div>
      <router-link to="/register">
        <a-button type="link">还没有账号？来注册吧！</a-button>
      </router-link>
    </a-flex>
  </div>
</template>

<script setup>
import { ref , onBeforeMount} from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import logo from '~/dx-logo.jpeg';
import {loginWithPwd} from "@/api/LoginRequest.js";
import {message} from "ant-design-vue";
import router from "@/router/index.js";
import {useSocketStore} from "@/utils/websocket";
import Pubsub from "pubsub-js";

/** 登录模式，1：密码登录；2：验证码登录 */
const loginModel = ref(['1']);
const loading = ref(false);
const loginWithPwdParam = ref({
  username: '',
  pwd: ''
});
// const ws = useSocketStore();

function handleLogin() {
  loading.value = true;
  loginWithPwd(loginWithPwdParam.value.username, loginWithPwdParam.value.pwd)
      .then(res => {
        loading.value = false;
        if (res.code === 0) {
          //登录成功
          const redirectPath = localStorage.getItem("redirectPath");
          localStorage.setItem('token', res.data.token);

          Pubsub.publish('login-sign', 'in');

          //注册websocket
          // ws.connection(res.data.token, res.data.userSession.userId);
          // ws.sendMsgParam.fromId = res.data.userSession.userId;

          if (typeof redirectPath !== "undefined" && redirectPath !== '') {
            router.push(redirectPath);
          } else {
            router.push('/');
          }
        } else {
          message.warn(res.msg);
        }
      });
}

</script>

<style lang="less" scoped>
.user-layout-login {
  width: 100%;
  display: flex;
  //align-items: center; //垂直居中
  justify-content: center;
  min-height: 700px;
  background: url('~/svgs/login-background.svg') fixed no-repeat;
  background-size: cover;
  label {
    font-size: 14px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }

  .forge-password {
    font-size: 14px;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .register {
      float: right;
    }
  }
}
</style>